<template>
    <transition name="slide-in-left">
        <div class="filters-container" id="filters-container" v-show="showFilters && cafesView === 'map'">
            <div class="close-filters" v-on:click="toggleShowFilters()">
                <img src="/storage/images/grey-left.svg"/>
            </div>

            <div class="grid-x grid-padding-x">
                <div class="large-12 medium-12 small-12 cell">
                    <span class="filters-header">城市</span>
                    <select v-model="cityFilter">
                        <option value=""></option>
                        <option v-for="city in cities" v-bind:value="city.id">{{ city.name }}</option>
                    </select>
                </div>
            </div>

            <div class="grid-x grid-padding-x">
                <div class="large-12 medium-12 small-12 cell">
                    <span class="filters-header">查找你寻找的咖啡店类型</span>
                </div>
            </div>

            <div class="grid-x grid-padding-x" id="text-container">
                <div class="large-12 medium-12 small-12 cell">
                    <span class="clear-filters" v-show="showFilters" v-on:click="clearFilters()">
                        <img src="/storage/images/clear-filters-icon.svg"/> 清除过滤器
                    </span>
                    <input type="text" class="search" v-model="textSearch" placeholder="通过名称查找位置"/>
                </div>
            </div>

            <div id="location-type-container">
                <div class="grid-x grid-padding-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label class="filter-label">位置类型</label>
                    </div>
                </div>

                <div class="grid-x grid-padding-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <div class="location-filter all-locations"
                             v-bind:class="{ 'active': activeLocationFilter === 'all' }"
                             v-on:click="setActiveLocationFilter('all')">
                            所有位置
                        </div>
                        <div class="location-filter roasters"
                             v-bind:class="{ 'active': activeLocationFilter === 'roasters' }"
                             v-on:click="setActiveLocationFilter('roasters')">
                            烘焙店
                        </div>
                        <div class="location-filter cafes" v-bind:class="{ 'active': activeLocationFilter === 'cafes' }"
                             v-on:click="setActiveLocationFilter('cafes')">
                            咖啡店
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid-x grid-padding-x" id="only-liked-container" v-show="user != '' && userLoadStatus === 2">
                <div class="large-12 medium-12 small-12 cell">
                    <input type="checkbox" v-model="onlyLiked"/> <span class="liked-location-label">只显示我喜欢过的</span>
                </div>
            </div>

            <div class="grid-x grid-padding-x"
                 v-show="activeLocationFilter === 'roasters' || activeLocationFilter === 'all'">
                <div class="large-12 medium-12 small-12 cell">
                    <label class="filter-label">是否提供订购服务</label>
                </div>
            </div>

            <div class="grid-x grid-padding-x"
                 v-show="activeLocationFilter === 'roasters' || activeLocationFilter === 'all'">
                <div class="large-12 medium-12 small-12 cell">
                    <div class="subscription option" v-on:click="toggleSubscriptionFilter()"
                         v-bind:class="{'active': hasSubscription }">
                        <div class="option-container">
                            <img src="/storage/images/coffee-pack.svg" class="option-icon"/>
                            <span class="option-name">咖啡订购</span>
                        </div>
                    </div>
                </div>
            </div>

            <div id="brew-methods-container">
                <div class="grid-x grid-padding-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label class="filter-label">冲泡方法</label>
                    </div>
                </div>

                <div class="grid-x grid-padding-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <div class="brew-method option" v-on:click="toggleBrewMethodFilter( method.id )"
                             v-for="method in brewMethods" v-if="method.cafes_count > 0"
                             v-bind:class="{'active': brewMethodsFilter.indexOf( method.id ) >= 0 }">
                            <div class="option-container">
                                <img v-bind:src="method.icon" class="option-icon"/> <span class="option-name">{{ method.method }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="drink-options-container">
                <div class="grid-x grid-padding-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label class="filter-label">饮料选项</label>
                    </div>
                </div>

                <div class="grid-x grid-padding-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <div class="drink-option option" v-on:click="toggleMatchaFilter()"
                             v-bind:class="{'active':hasMatcha}">
                            <div class="option-container">
                                <img src="/storage/images/matcha-latte.svg" class="option-icon"/>
                                <span class="option-name">抹茶</span>
                            </div>
                        </div>
                        <div class="drink-option option" v-on:click="toggleTeaFilter()"
                             v-bind:class="{'active':hasTea}">
                            <div class="option-container">
                                <img src="/storage/images/tea-bag.svg" class="option-icon"/>
                                <span class="option-name">茶包</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </transition>
</template>

<script>
    import {EventBus} from "../../event-bus";

    export default {
        name: "Filters",
        mounted() {
            //显示过滤器
            EventBus.$on('show-filters', function (data) {
                this.show = true
            }.bind(this));
            //清除过滤器
            EventBus.$on('clear-filters', function (data) {
                this.clearFilters();
            }.bind(this));
        },
        watch: {
            cityFilter: function () {
                if (this.cityFilter != '') {
                    let slug = '';
                    for (let i = 0; i < this.cities.length; i++) {
                        if (this.cities[i].id == this.cityFilter) {
                            slug = this.cities[i].slug;
                            break;
                        }
                    }
                    if (slug == '') {
                        this.$router.push({name: 'cafes'})
                    } else {
                        this.$router.push({name: 'city', params: {slug: slug}})
                    }
                } else {
                    this.$router.push({name: 'cafes'})
                }
            },
            citiesLoadStatus: function () {
                if (this.citiesLoadStatus == 2 && this.$route.name == 'city') {
                    let id = '';
                    for (let i = 0; i < this.cities.length; i++) {
                        if (this.cities[i].slug == this.$route.params.slug) {
                            this.cityFilter = this.cities[i].id;
                        }
                    }
                }
            }
        },
        computed: {
            //获取城市列表
            cities: function () {
                return this.$store.getters.getCities;
            },
            //城市列表加载状态
            citiesLoadStatus: function () {
                return this.$store.getters.citiesLoadStatus;
            },
            //城市筛选器
            cityFilter: {
                set(cityFilter) {
                    this.$store.commit('setCityFilter', cityFilter)
                },
                get() {
                    return this.$store.getters.getCityFilter;
                }
            },
            //显示筛选条件
            showFilters: function () {
                return this.$store.getters.getShowFilters;
            },
            //获取冲泡方法
            brewMethods: function () {
                return this.$store.getters.getBrewMethods;
            },
            //获取当前用户
            user: function () {
                return this.$store.getters.getUser;
            },
            //获取当前用户加载状态
            getUserLoadStatus: function () {
                return this.$store.getters.getUserLoadStatus;
            },
            //
            getCafesView: function () {
                return this.$store.getters.getCafesView;
            },
            //关键字
            textSearch: {
                get() {
                    return this.$store.getters.getTextSearch;
                },
                set(textSearch) {
                    this.$store.commit('setTextSearch', textSearch);
                }
            },
            //位置筛选
            activeLocationFilter: function () {
                return this.$store.getters.getActiveLocationFilter;
            },
            //冲泡方法筛选
            brewMethodsFilter() {
                return this.$store.getters.getBrewMethodsFilter;
            },
            //是否收藏/喜欢
            onlyLiked: {
                get() {
                    return this.$store.getters.getOnlyLiked;
                },
                set(onlyLiked) {
                  this.$store.commit('setOnlyLiked',onlyLiked);
                }
            },
            //抹茶筛选
            hasMatcha:function () {
                return this.$store.getters.getHasMatcha;
            },
            //茶水筛选
            hasTea:function () {
                return this.$store.getters.getHasTea;
            },
            //订阅筛选
            hasSubscription:function () {
                return this.$store.getters.getHasSubscription;
            }
        },
        methods: {
            //重置筛选条件
            clearFilters() {
                this.$store.dispatch('resetFilters')
            },
            //位置设置
            setActiveLocationFilter(filter){
                this.$store.dispatch('updateActiveLocationFilter',{activeLocationFilter:filter});
            },
            //冲泡方法筛选
            toggleBrewMethodFilter(id){
                let localBrewMethodsFilter = this.brewMethodsFilter;
                if(localBrewMethodsFilter.indexOf(id)>=0){
                    localBrewMethodsFilter.splice(localBrewMethodsFilter.indexOf(id),1)
                }else {
                    localBrewMethodsFilter.push(id)
                }
                this.$store.dispatch('updateBrewMethodsFilter',{brewMethodsFilter,localBrewMethodsFilter});
            },
            //是否显示筛选条件
            toggleShowFilters(){
                this.$store.dispatch('toggleShowFilters',{showFilters:!this.showFilters})
            },
            //抹茶筛选
            toggleMatchaFilter(){
                this.$store.dispatch('updateHasMatcha',{hasMatcha:!this.hasMatcha})
            },
            //茶包筛选
            toggleTeaFilter(){
                this.$store.dispatch('updateHasTea',{hasMatcha:!this.hasTea})
            },
            //订阅筛选
            toggleSubscriptionFilter() {
                this.$store.dispatch('updateHasSubscription', !this.hasSubscription);
            },
        }
    }
</script>

<style lang="scss">
    @import '~@/abstracts/_variables.scss';

    div.filters-container {
        background-color: white;
        position: fixed;
        left: 0;
        bottom: 0;
        top: 75px;
        max-width: 550px;
        width: 100%;
        padding-top: 50px;
        box-shadow: 0 2px 4px 0 rgba(3, 27, 78, 0.10);
        z-index: 99;

        span.clear-filters {
            font-size: 16px;
            color: $text-secondary-color;
            font-family: "Lato", sans-serif;
            cursor: pointer;
            display: block;
            float: left;
            margin-bottom: 20px;
            display: none;

            img {
                margin-right: 10px;
                float: left;
                margin-top: 6px;
            }
        }

        span.filters-header {
            display: block;
            font-family: "Lato", sans-serif;
            font-weight: bold;
            margin-bottom: 10px;
        }

        input[type="text"].search {
            box-shadow: none;
            border-radius: 3px;
            color: #BABABA;
            font-size: 16px;
            font-family: "Lato", sans-serif;
            background-image: url('/storage/images/search-icon.svg');
            background-repeat: no-repeat;
            background-position: 6px;
            padding-left: 35px;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        label.filter-label {
            font-family: "Lato", sans-serif;
            text-transform: uppercase;
            font-weight: bold;
            color: black;
            margin-top: 20px;
            margin-bottom: 10px;
        }

        div.location-filter {
            text-align: center;
            font-family: "Lato", sans-serif;
            font-size: 16px;
            color: $secondary-color;
            border-bottom: 1px solid $secondary-color;
            border-top: 1px solid $secondary-color;
            border-left: 1px solid $secondary-color;
            border-right: 1px solid $secondary-color;
            width: 33%;
            display: inline-block;
            height: 55px;
            line-height: 55px;
            cursor: pointer;
            margin-bottom: 5px;

            &.active {
                color: white;
                background-color: $secondary-color;
            }

            &.all-locations {
                border-top-left-radius: 3px;
                border-bottom-left-radius: 3px;
            }

            &.roasters {
                border-left: none;
                border-right: none;
            }

            &.cafes {
                border-top-right-radius: 3px;
                border-bottom-right-radius: 3px;
            }
        }

        span.liked-location-label {
            color: #666666;
            font-size: 16px;
            font-family: "Lato", sans-serif;
            margin-left: 10px;
        }

        div.close-filters {
            height: 90px;
            width: 23px;
            position: absolute;
            right: -20px;
            background-color: white;
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
            line-height: 90px;
            top: 50%;
            cursor: pointer;
            margin-top: -82px;
            text-align: center;
        }

        span.no-results {
            display: block;
            text-align: center;
            margin-top: 50px;
            color: #666666;
            text-transform: uppercase;
            font-weight: 600;
        }
    }

    /* Small only */
    @media screen and (max-width: 39.9375em) {
        div.filters-container {
            padding-top: 25px;
            overflow-y: auto;

            span.clear-filters {
                display: block;
            }

            div.close-filters {
                display: none;
            }
        }
    }

    /* Medium only */
    @media screen and (min-width: 40em) and (max-width: 63.9375em) {
    }

    /* Large only */
    @media screen and (min-width: 64em) and (max-width: 74.9375em) {
    }
</style>
